<!DOCTYPE.html>
<html>
	<head>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
	<script type="text/javascript" src="base.js"></script>
	<script type="text/javascript" src="shapes.js"></script>
	<script type="text/javascript" src="core.js"></script>
	<link rel="stylesheet" type="site/css" href="site.css"/>
</head>

	<body>
	<div id="all">
	
	<div id="theCanvas">
		<canvas id="myCanvas" width="600" height="600" style="border-style:solid; border-width:1px">
		</canvas>
		</div>
	<div class="container">
		<ul style="vertical-align:middle;">
			<li id="rectangle"><a href="#">Rectangle</a></li>
			<li id="circle"><a href="#">Circle</a></li>
			<li id="line"><a href="#">Line</a></li>
			<li id="freehand"><a href="#">Pen</a></li>
			<li id="text"><a href="#">Insert Text</a></li>
			<li id="undo"><a href="#">Undo</a></li>
			<li id="redo"><a href="#">Redo</a></li>
			<li id="selectShape"><a href="#">Select</a></li>
			
		</ul>
		<div id="colorPicker">
       	<div class="column1">
           <canvas id="panel" width="400" height="250"></canvas>
        </div>
            <div class="column2">
   				<div class="inner">
	                <div>Preview</div>
	                <div id="preview"></div>
	               
          		</div>
                <!--<div>RGB: <input type="text" id="rgbVal" /></div>
                <div>RGBA: <input type="text" id="rgbaVal" /></div>
                <div>HEX: <input type="text" id="hexVal" /></div>
                <hr />-->
                <div class="inner">
                	<div>Selected color</div>
                	<div id="selectedColor"></div>
                	<div class="inputBox">
                	 <div class="input">R: <input type="text" id="rVal" /></div>
	                <div class="input">G: <input type="text" id="gVal" /></div>
	                <div class="input">B: <input type="text" id="bVal" /></div>
	            	</div>
                </div>
            </div>
           
            <div style="clear:both;"></div>
        </div>
    </div>
    <div id="templateOptions">
	<button id="template">Create template</button>
		<input id="templateName" type="text" name="tname">
		<br/>
		<select id="templateList">
			<option value="0">no templates</option>
		</select>
		<button id="addTemplate">Insert</button>
    </div>
	<textarea rows="4" cols="50" id="saveText">Enter save code...</textarea>
	<button id="saveButton">save</button>
	<button id="loadButton">load</button>
	</div>
	</body>

</html>